<template>
  <el-tabs :tab-position="tabPosition" style="height: 100%;margin-left: 10%" class="demo-tabs" >
    <el-tab-pane label="基础信息" >
        <el-card style="max-width: 70%">
          <template #header>基础信息</template>
          <el-form
              ref="basicInformationFormRef"
              :model="basicInformationForm"
              :rules="basicInformationFormRules"
              label-width="auto"
              style="max-width: 600px"
              :inline="true">
            <el-form-item label="姓名" style="width: 40%" prop="name">
              <el-input v-model="basicInformationForm.name" minlength="2" maxlength="5"/>
            </el-form-item>
            <el-form-item label="身份证号" style="width: 40%" prop="number">
              <el-input v-model="basicInformationForm.number" maxlength="18" @input="numberInputChange(basicInformationForm.number)"/>
            </el-form-item>
            <el-form-item label="性别" style="width: 40%" prop="sex">
              <el-radio-group v-model="basicInformationForm.sex" disabled>
                <el-radio value="0">男</el-radio>
                <el-radio value="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" style="width: 40%" prop="brithday">
              <el-date-picker
                  v-model="basicInformationForm.brithday"
                  type="date"
                  disabled
                  clearable
              />
            </el-form-item>
            <el-form-item label="等级" style="width: 40%" prop="grade">
              <el-input v-model="basicInformationForm.grade" disabled/>
            </el-form-item>
            <el-form-item label="人员分类" style="width: 40%" prop="classify">
              <el-input v-model="basicInformationForm.classify" disabled/>
            </el-form-item>
            <el-form-item label="正式编制" style="width: 40%" prop="esta">
              <el-input v-model="basicInformationForm.esta" disabled/>
            </el-form-item>
            <el-form-item label="部门名称" style="width: 40%" prop="section">
              <el-input v-model="basicInformationForm.section" disabled/>
            </el-form-item>
            <el-form-item label="文化程度"  style="width: 40%" prop="edu">
              <el-select
                  v-model="basicInformationForm.edu"
                  placeholder="请选择文化程度"
                  clearable
              >
                <el-option label="博士及以上" value="0" />
                <el-option label="研究生" value="1" />
                <el-option label="本科" value="2" />
                <el-option label="大专" value="3" />
                <el-option label="高中" value="4" />
                <el-option label="初中及以下" value="5" />
              </el-select>
            </el-form-item>
            <el-form-item label="主职务" style="width: 40% " prop="job">
              <el-input v-model="basicInformationForm.job" disabled/>
            </el-form-item>
            <el-form-item label="籍贯" style="width: 40%" prop="place">
              <el-input v-model="basicInformationForm.place" maxlength="10" placeholder="请输入籍贯"/>
            </el-form-item>
            <el-form-item label="民族" style="width: 40%" prop="nation">
              <el-input v-model="basicInformationForm.nation" maxlength="15" placeholder="请输入民族"/>
            </el-form-item>
            <el-form-item label="入职日期" style="width: 40%" prop="jobDate">
              <el-date-picker
                  v-model="basicInformationForm.jobDate"
                  type="date"
                  placeholder="请选择入职日期"
                  clearable
              />
            </el-form-item>
            <el-form-item label="入党日期" style="width: 40%" prop="partyDate">
              <el-date-picker
                  v-model="basicInformationForm.partyDate"
                  type="date"
                  placeholder="请选择入党日期"
                  clearable
              />
            </el-form-item>
            <el-form-item label="政治面貌"  style="width: 40%" prop="politicsStatus">
              <el-select
                  v-model="basicInformationForm.politicsStatus"
                  placeholder="请选择政治面貌"
                  clearable
              >
                <el-option label="共产党员" value="0" />
                <el-option label="中共预备党员" value="1" />
                <el-option label="共青团员‌" value="2" />
                <el-option label="群众" value="3" />
                <el-option label="民革党员" value="4" />
                <el-option label="民盟盟员" value="5" />
                <el-option label="民建会员" value="6" />
                <el-option label="民进会员‌" value="7" />
                <el-option label="农工党党员‌" value="8" />
                <el-option label="致公党党员" value="9" />
              </el-select>
            </el-form-item>
            <el-form-item label="婚姻"  style="width: 40%" prop="marriage">
              <el-select
                  v-model="basicInformationForm.marriage"
                  placeholder="请选择婚姻"
                  clearable
              >
                <el-option label="未婚" value="0" />
                <el-option label="已婚" value="1" />
                <el-option label="离异" value="2" />
                <el-option label="丧偶" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item >
              <el-button type="primary" @click="submitBasicInformationForm(basicInformationForm)" style="width: 500px;margin-left: 38px">
                提交
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
    </el-tab-pane>
    <el-tab-pane label="学历信息">
        <el-card style="max-width: 900px">
          <el-button type="success" round style="margin-bottom: 10px;float: right" @click="EduDialog = true">添 加</el-button>
          <el-table :data="eduTableDate"
                    stripe border
                    style="width: 100%">
            <el-table-column prop="userEdu" label="学历" width="180px" >
              <template #default="scope">
                <dict-tag :options="user_edu" :value="scope.row.userEdu"/>
              </template>
            </el-table-column>
            <el-table-column prop="userCollege" label="院校" width="180px" />
            <el-table-column prop="userMajor" label="专业" width="180px" />
            <el-table-column prop="userGraduationDate" label="毕业时间" width="180px" />
            <el-table-column prop="" label="操作" width="180px">
              <template #default="scope">
                <el-button type="danger" :icon="Delete" circle @click="deleteEduHandler(scope.row.id)"/>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
    </el-tab-pane>
    <el-tab-pane label="亲属信息">
      <div>
        <el-card style="max-width: 1200px">
          <el-button type="success" round style="margin-bottom: 10px;float: right" @click="familyDialog = true">添 加</el-button>
          <el-table  :data="familyBasicInformationList">
            <el-table-column label="亲属姓名" align="center" prop="familyName" />
            <el-table-column label="与本人关系" align="center" prop="familyRelation" />
            <el-table-column label="证件号" align="center" prop="famliyCertificatenumber" />
            <el-table-column label="证件名称" align="center" prop="famliyCertificatename" />
            <el-table-column label="是否与子女共同生活" align="center" prop="familyLivetogether">
              <template #default="scope">
                <dict-tag :options="sys_yes_no" :value="scope.row.familyLivetogether"/>
              </template>
            </el-table-column>
            <el-table-column label="婚姻状况" align="center" prop="familyMarriage">
              <template #default="scope">
                <dict-tag :options="user_marriage" :value="scope.row.familyMarriage"/>
              </template>
            </el-table-column>
            <el-table-column label="婚姻变化情况" align="center" prop="familyMarriagechang">
              <template #default="scope">
                <dict-tag :options="user_marriage" :value="scope.row.familyMarriagechang"/>
              </template>
            </el-table-column>
            <el-table-column label="工作" align="center" prop="familyOrganization" />
            <el-table-column label="现任职务" align="center" prop="familyJob" />
            <el-table-column label="单位性质" align="center" prop="famliyJobNature">
              <template #default="scope">
                <dict-tag :options="job_type" :value="scope.row.famliyJobNature"/>
              </template>
            </el-table-column>
            <el-table-column label="是否担任高级职务" align="center" prop="famliyIfHighjob">
              <template #default="scope">
                <dict-tag :options="sys_yes_no" :value="scope.row.famliyIfHighjob"/>
              </template>
            </el-table-column>
            <el-table-column label="是否在国" align="center" prop="famliyIfAbroad">
              <template #default="scope">
                <dict-tag :options="sys_yes_no" :value="scope.row.famliyIfAbroad"/>
              </template>
            </el-table-column>
            <el-table-column label="是否为单位合伙人或设立人" align="center" prop="famliyIfJobPartner">
              <template #default="scope">
                <dict-tag :options="sys_yes_no" :value="scope.row.famliyIfJobPartner"/>
              </template>
            </el-table-column>
            <el-table-column label="是否在本单位辖区内执业" align="center" prop="famliyIfLocal">
              <template #default="scope">
                <dict-tag :options="sys_yes_no" :value="scope.row.famliyIfLocal"/>
              </template>
            </el-table-column>
            <el-table-column label="辖区" align="center" prop="famliyJurisdiction" />
            <el-table-column label="执业范围" align="center" prop="famliyBusinessscope" />
            <el-table-column label="是否提出回避申请" align="center" prop="famliyIfAvoid">
              <template #default="scope">
                <dict-tag :options="sys_yes_no" :value="scope.row.famliyIfAvoid"/>
              </template>
            </el-table-column>
            <el-table-column label="回避申请的具体情形" align="center" prop="famliyAvoid" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
              <template #default="scope">
                <el-button link type="primary" icon="Delete" @click="familyBasicInformationHandleDelete(scope.row)" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-tab-pane>
    <el-tab-pane label="犯罪信息">
      <div>
        <el-card style="max-width: 1200px">
          <el-button type="success" round style="margin-bottom: 10px;float: right" @click="criminalDialog = true">添 加</el-button>
          <el-table  :data="criminalList" >
            <el-table-column label="亲属姓名" align="center" prop="famliyName" />
            <el-table-column label="与本人关系" align="center" prop="familyRelation" />
            <el-table-column label="身份证号" align="center" prop="famliyNumber" />
            <el-table-column label="被追究日期" align="center" prop="familyCriminalDate" width="180">
              <template #default="scope">
                <span>{{ parseTime(scope.row.familyCriminalDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="被追究原因" align="center" prop="familyCriminalReason" />
            <el-table-column label="处理阶段" align="center" prop="familyCriminalStage" />
            <el-table-column label="处理结果" align="center" prop="familyCriminalResult" />
            <el-table-column label="备注" align="center" prop="famliyRemark" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button link type="primary" icon="Delete" @click="criminaHandleDelete(scope.row)" v-hasPermi="['information:criminal:remove']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-tab-pane>
    <el-tab-pane label="出国信息">
      <div>
        <el-card style="max-width: 1200px">
          <el-button type="success" round style="margin-bottom: 10px;float: right" @click="abroadDialog = true">添 加</el-button>
          <el-table  :data="abroadList" >
            <el-table-column label="亲属姓名" align="center" prop="famliyName" />
            <el-table-column label="与本人关系" align="center" prop="familyRelation" />
            <el-table-column label="身份证号" align="center" prop="famliyNumber" />
            <el-table-column label="所在国家" align="center" prop="famliyRegion" />
            <el-table-column label="工作生活城市" align="center" prop="famliyCity" />
            <el-table-column label="工作" align="center" prop="famliyJob" />
            <el-table-column label="职务" align="center" prop="famliyDuty" />
            <el-table-column label="起始日期" align="center" prop="famliyBegindate" width="180">
              <template #default="scope">
                <span>{{ parseTime(scope.row.famliyBegindate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="返回日期" align="center" prop="famliyEnddate" width="180">
              <template #default="scope">
                <span>{{ parseTime(scope.row.famliyEnddate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="famliyRemark" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
              <template #default="scope">
                <el-button link type="primary" icon="Delete" @click="handleAbroadDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-tab-pane>
    <el-tab-pane label="移居信息">
      <div>
        <el-card style="max-width: 1200px">
          <el-button type="success" round style="margin-bottom: 10px;float: right" @click="migrateDialog = true">添 加</el-button>
          <el-table :data="migrateList" >
            <el-table-column label="亲属姓名" align="center" prop="famliyName" />
            <el-table-column label="与本人关系" align="center" prop="familyRelation" />
            <el-table-column label="身份证号" align="center" prop="famliyNumber" />
            <el-table-column label="移居国家" align="center" prop="famliyMigrateArea" />
            <el-table-column label="现住城市" align="center" prop="famliyLiveCity" />
            <el-table-column label="移居证件号码" align="center" prop="famliyMigrateNumber" />
            <el-table-column label="移居类别" align="center" prop="famliyMigrateType">
              <template #default="scope">
                <dict-tag :options="migrate_type" :value="scope.row.famliyMigrateType"/>
              </template>
            </el-table-column>
            <el-table-column label="移居日期" align="center" prop="famliyMigrateDate" width="180">
              <template #default="scope">
                <span>{{ parseTime(scope.row.famliyMigrateDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="famliyRemark" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button link type="primary" icon="Delete" @click="handleMigrateDelete(scope.row)" v-hasPermi="['information:migrate:remove']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-tab-pane>
  </el-tabs>
  <el-dialog v-model="EduDialog" title="学历" width="700">
    <el-form ref="eduFormRef"
             :model="eduForm"
             :rules="eduFormRules"
             label-width="auto"
             style="max-width: 600px"
             >
      <el-form-item label="学历"  style="width: 100%" prop="userEdu">
        <el-select
            v-model="eduForm.userEdu"
            placeholder="请选择文化程度"
            clearable
        >
          <el-option label="博士及以上" value="0" />
          <el-option label="研究生" value="1" />
          <el-option label="本科" value="2" />
          <el-option label="大专" value="3" />
          <el-option label="高中" value="4" />
          <el-option label="初中及以下" value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="毕业院校" style="width: 100%" prop="userCollege">
        <el-input v-model="eduForm.userCollege" minlength="2" maxlength="20"/>
      </el-form-item>
      <el-form-item label="所学专业" style="width: 100%" prop="userMajor">
        <el-input v-model="eduForm.userMajor" minlength="2" maxlength="20"/>
      </el-form-item>
      <el-form-item label="毕业日期" style="width: 100%" prop="userGraduationDate">
        <el-date-picker
            v-model="eduForm.userGraduationDate"
            type="date"
            clearable
        />
      </el-form-item>
      <el-button type="primary" style="margin-left: 200px;width: 200px" round @click="addEdu(eduForm)">提交</el-button>
    </el-form>
  </el-dialog>
  <el-dialog title="亲属" v-model="familyDialog" width="500px" >
    <el-form ref="familyBasicInformationFormRef" :model="familyBasicInformationForm" :rules="familyBasicInformationFormRules" label-width="80px">
      <el-form-item label="亲属姓名" prop="familyName" label-width="180px">
        <el-input v-model="familyBasicInformationForm.familyName" placeholder="请输入亲属姓名" />
      </el-form-item>
      <el-form-item label="与本人关系" prop="familyRelation" label-width="180px">
        <el-input v-model="familyBasicInformationForm.familyRelation" placeholder="请输入与本人关系" />
      </el-form-item>
      <el-form-item label="证件号" prop="famliyCertificatenumber" label-width="180px">
        <el-input v-model="familyBasicInformationForm.famliyCertificatenumber" placeholder="请输入证件号" />
      </el-form-item>
      <el-form-item label="证件名称" prop="famliyCertificatename" label-width="180px">
        <el-input v-model="familyBasicInformationForm.famliyCertificatename" placeholder="请输入证件名称" />
      </el-form-item>
      <el-form-item label="是否与子女共同生活" prop="familyLivetogether" label-width="180px">
        <el-radio-group v-model="familyBasicInformationForm.familyLivetogether">
          <el-radio
              v-for="dict in sys_yes_no"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="婚姻状况" prop="familyMarriage" label-width="180px">
        <el-radio-group v-model="familyBasicInformationForm.familyMarriage">
          <el-radio
              v-for="dict in user_marriage"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="婚姻变化情况" prop="familyMarriagechang" label-width="180px">
        <el-radio-group v-model="familyBasicInformationForm.familyMarriagechang">
          <el-radio
              v-for="dict in user_marriage"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="工作" prop="familyOrganization" label-width="180px">
        <el-input v-model="familyBasicInformationForm.familyOrganization" placeholder="请输入工作" />
      </el-form-item>
      <el-form-item label="现任职务" prop="familyJob" label-width="180px">
        <el-input v-model="familyBasicInformationForm.familyJob" placeholder="请输入现任职务" />
      </el-form-item>
      <el-form-item label="单位性质" prop="famliyJobNature" label-width="180px">
        <el-radio-group v-model="familyBasicInformationForm.famliyJobNature">
          <el-radio
              v-for="dict in job_type"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否担任高级职务" prop="famliyIfHighjob" label-width="180px">
        <el-radio-group v-model="familyBasicInformationForm.famliyIfHighjob">
          <el-radio
              v-for="dict in sys_yes_no"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否在国" prop="famliyIfAbroad" label-width="180px">
        <el-radio-group v-model="familyBasicInformationForm.famliyIfAbroad">
          <el-radio
              v-for="dict in sys_yes_no"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否为单位合伙人或设立人" prop="famliyIfJobPartner" label-width="180px">
        <el-radio-group v-model="familyBasicInformationForm.famliyIfJobPartner">
          <el-radio
              v-for="dict in sys_yes_no"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否在本单位辖区内执业" prop="famliyIfLocal" label-width="180px">
        <el-radio-group v-model="familyBasicInformationForm.famliyIfLocal">
          <el-radio
              v-for="dict in sys_yes_no"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="辖区" prop="famliyJurisdiction" label-width="180px">
        <el-input v-model="familyBasicInformationForm.famliyJurisdiction" placeholder="请输入辖区" />
      </el-form-item>
      <el-form-item label="执业范围" prop="famliyBusinessscope" label-width="180px">
        <el-input v-model="familyBasicInformationForm.famliyBusinessscope" placeholder="请输入执业范围" />
      </el-form-item>
      <el-form-item label="是否提出回避申请" prop="famliyIfAvoid" label-width="180px">
        <el-radio-group v-model="familyBasicInformationForm.famliyIfAvoid">
          <el-radio
              v-for="dict in sys_yes_no"
              :key="dict.value"
              :label="dict.value"
          >{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="回避申请的具体情形" prop="famliyAvoid" label-width="180px">
        <el-input v-model="familyBasicInformationForm.famliyAvoid" placeholder="请输入回避申请的具体情形" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFamilyBasicInformationForm(familyBasicInformationForm)">确 定</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog title="犯罪" v-model="criminalDialog" width="500px" >
    <el-form ref="criminalFormRef" :model="criminalForm" :rules="criminalFormRules" label-width="80px">
      <el-form-item label="亲属姓名" prop="famliyName" label-width="100px">
        <el-input v-model="criminalForm.famliyName" placeholder="请输入亲属姓名" />
      </el-form-item>
      <el-form-item label="与本人关系" prop="familyRelation" label-width="100px">
        <el-input v-model="criminalForm.familyRelation" placeholder="请输入与本人关系" />
      </el-form-item>
      <el-form-item label="身份证号" prop="famliyNumber" label-width="100px">
        <el-input v-model="criminalForm.famliyNumber" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="被追究日期" prop="familyCriminalDate" label-width="100px">
        <el-date-picker clearable
                        v-model="criminalForm.familyCriminalDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择被追究日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="被追究原因" prop="familyCriminalReason" label-width="100px">
        <el-input v-model="criminalForm.familyCriminalReason" placeholder="请输入被追究原因" />
      </el-form-item>
      <el-form-item label="处理阶段" prop="familyCriminalStage" label-width="100px">
        <el-input v-model="criminalForm.familyCriminalStage" placeholder="请输入处理阶段(立案侦查、审查起诉、刑事审判、刑罚执行、执行完毕、其他)" />
      </el-form-item>
      <el-form-item label="处理结果" prop="familyCriminalResult" label-width="100px">
        <el-input v-model="criminalForm.familyCriminalResult" placeholder="请输入处理结果" />
      </el-form-item>
      <el-form-item label="备注" prop="famliyRemark" label-width="100px">
        <el-input v-model="criminalForm.famliyRemark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitCriminalForm(criminalForm)">确 定</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="abroadDialog" title="出国" width="700">
    <el-form ref="abroadRef" :model="abroadForm" :rules="abroadRules" label-width="80px">
      <el-form-item label="亲属姓名" prop="famliyName" label-width="120px">
        <el-input v-model="abroadForm.famliyName" placeholder="请输入亲属姓名" />
      </el-form-item>
      <el-form-item label="与本人关系" prop="familyRelation" label-width="120px">
        <el-input v-model="abroadForm.familyRelation" placeholder="请输入与本人关系" />
      </el-form-item>
      <el-form-item label="身份证号" prop="famliyNumber" label-width="120px">
        <el-input v-model="abroadForm.famliyNumber" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="所在国家" prop="famliyRegion" label-width="120px">
        <el-input v-model="abroadForm.famliyRegion" placeholder="请输入所在国家" />
      </el-form-item>
      <el-form-item label="工作生活城市" prop="famliyCity" label-width="120px">
        <el-input v-model="abroadForm.famliyCity" placeholder="请输入工作生活城市" />
      </el-form-item>
      <el-form-item label="工作" prop="famliyJob" label-width="120px">
        <el-input v-model="abroadForm.famliyJob" placeholder="请输入工作" />
      </el-form-item>
      <el-form-item label="职务" prop="famliyDuty" label-width="120px">
        <el-input v-model="abroadForm.famliyDuty" placeholder="请输入职务" />
      </el-form-item>
      <el-form-item label="起始日期" prop="famliyBegindate" label-width="120px">
        <el-date-picker clearable
                        v-model="abroadForm.famliyBegindate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择起始日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="返回日期" prop="famliyEnddate" label-width="120px">
        <el-date-picker clearable
                        v-model="abroadForm.famliyEnddate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择返回日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="famliyRemark" label-width="120px">
        <el-input v-model="abroadForm.famliyRemark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitAbroadForm(abroadForm)">确 定</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="migrateDialog" title="移居" width="700">
    <el-form ref="migrateRef" :model="migrateForm" :rules="migrateRules" label-width="80px">
      <el-form-item label="亲属姓名" prop="famliyName" label-width="120px">
        <el-input v-model="migrateForm.famliyName" placeholder="请输入亲属姓名" />
      </el-form-item>
      <el-form-item label="与本人关系" prop="familyRelation" label-width="120px">
        <el-input v-model="migrateForm.familyRelation" placeholder="请输入与本人关系" />
      </el-form-item>
      <el-form-item label="身份证号" prop="famliyNumber" label-width="120px">
        <el-input v-model="migrateForm.famliyNumber" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="移居国家" prop="famliyMigrateArea" label-width="120px">
        <el-input v-model="migrateForm.famliyMigrateArea" placeholder="请输入移居国家" />
      </el-form-item>
      <el-form-item label="现住城市" prop="famliyLiveCity" label-width="120px">
        <el-input v-model="migrateForm.famliyLiveCity" placeholder="请输入现住城市" />
      </el-form-item>
      <el-form-item label="移居证件号码" prop="famliyMigrateNumber" label-width="120px">
        <el-input v-model="migrateForm.famliyMigrateNumber" placeholder="请输入移居证件号码" />
      </el-form-item>
      <el-form-item label="移居类别" prop="famliyMigrateType" label-width="120px">
        <el-select v-model="migrateForm.famliyMigrateType" placeholder="请选择移居类别">
          <el-option
              v-for="dict in migrate_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="移居日期" prop="famliyMigrateDate" label-width="120px">
        <el-date-picker clearable
                        v-model="migrateForm.famliyMigrateDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择移居日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="famliyRemark" label-width="120px">
        <el-input v-model="migrateForm.famliyRemark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitMigrateForm(migrateForm)">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script  setup>
import { ref,reactive} from "vue"
import {ElMessage} from "element-plus";
import {  addInformation,getInformation } from "@/api/information/information";
import {Delete} from "@element-plus/icons-vue";
import {addEduinformation, delEduinformation, getEduinformation} from "@/api/information/eduinformation.js";
import {
  listFamilyBasicInformation,
  delFamilyBasicInformation,
  addFamilyBasicInformation,
} from "@/api/information/familyBasicInformation.js";
import { listCriminal,delCriminal, addCriminal,  } from "@/api/information/criminal";
import { listAbroad, delAbroad, addAbroad, } from "@/api/information/abroad";
import { listMigrate,  delMigrate, addMigrate,  } from "@/api/information/migrate";
import {parseTime} from "../../utils/ruoyi.js";
const { proxy } = getCurrentInstance();
const { user_politics_status, user_edu, sys_user_sex, user_marriage ,job_type, sys_yes_no,migrate_type} =
    proxy.useDict('user_politics_status', 'user_edu', 'sys_user_sex', 'user_marriage','job_type', 'sys_yes_no','migrate_type');
onMounted(()=>{
  showBasicInformationForm()
  showEduInformation()
  getFamilyBasicInformationList()
  getCriminalList()
  getAbroadList()
  getMigrateList()
})
const tabPosition = ref("right")
///////////////基本信息//////////////////
const basicInformationFormRef=ref()
const basicInformationForm = reactive({
  userId:'',
  name: '',
  number:'',
  sex:'',
  brithday:'',
  grade:'',
  classify:'',
  esta:'',
  section:'',
  edu:'',
  job:'',
  place:'',
  nation:'',
  jobDate:'',
  partyDate:'',
  politicsStatus:'',
  marriage:''
})
const basicInformationFormRules = reactive({
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 5, message: "长度在2-5", trigger: "blur" }
  ],
  number:[
    { required: true, message: "请输入身份证", trigger: "blur" },
    { pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  marriage:[
    { required: true, message: "请输入婚姻状况", trigger: "blur" },
  ]
})
// 身份证识别性别出生日期
const numberInputChange = (number) => {
  if (number.length===18) {
    let org_birthday = number.substring(6, 14);
    let org_gender = number.substring(16, 17);
    let sex = org_gender % 2 == 1 ? "0" : "1";
    let birthday =
        org_birthday.substring(0, 4) +
        "-" +
        org_birthday.substring(4, 6) +
        "-" +
        org_birthday.substring(6, 8);
    basicInformationForm.sex=sex;
    basicInformationForm.brithday=birthday;
  } else {
    return false;
  }
};
const submitBasicInformationForm = (basicInformationForm) => {
  basicInformationFormRef.value.validate((valid)=>{
    if(valid){
      let data={
        userId:basicInformationForm.userId,
        userName:basicInformationForm.name,
        userNumber:basicInformationForm.number,
        userSex:basicInformationForm.sex,
        userBrithday:basicInformationForm.brithday,
        userGrade:basicInformationForm.grade,
        userClassify:basicInformationForm.classify,
        userEsta:basicInformationForm.esta,
        userSection:basicInformationForm.section,
        userEdu:basicInformationForm.edu,
        userJob:basicInformationForm.job,
        userPlace:basicInformationForm.place,
        userNation:basicInformationForm.nation,
        userJobDate:basicInformationForm.jobDate,
        userPartyDate:basicInformationForm.partyDate,
        userPoliticsstatus:basicInformationForm.politicsStatus,
        userMarriage:basicInformationForm.marriage
      }
      addInformation(data)
    }else {
      ElMessage.error('提交错误错误')
    }
  })
}
const showBasicInformationForm =()=>{
  getInformation(-1).then(response => {
    console.log(response.data);
    basicInformationForm.userId=response.data.userId
    basicInformationForm.name=response.data.userName
    basicInformationForm.number=response.data.userNumber
    basicInformationForm.sex=response.data.userSex
    basicInformationForm.brithday=response.data.userBrithday
    basicInformationForm.grade=response.data.userGrade
    basicInformationForm.classify=response.data.userClassify
    basicInformationForm.esta=response.data.userEsta
    basicInformationForm.section=response.data.userSection
    basicInformationForm.edu=response.data.userEdu
    basicInformationForm.job=response.data.userJob
    basicInformationForm.place=response.data.userPlace
    basicInformationForm.nation=response.data.userNation
    basicInformationForm.jobDate=response.data.userJobDate
    basicInformationForm.partyDate=response.data.userPartyDate
    basicInformationForm.politicsStatus=response.data.userPoliticsstatus
    basicInformationForm.marriage=response.data.userMarriage
    basicInformationForm.userId=response.data.userId
  });
}


//////////////////学历信息/////////////////
const eduTableDate=ref([])
const eduFormRef=ref()
const eduForm = reactive({
  id:'',
  userId:'',
  userEdu:'',
  userCollege:'',
  userMajor:'',
  userGraduationDate:'',
})

//查看用户学历信息回显
const EduDialog = ref(false)
const showEduInformation =()=>{
  getEduinformation(-1).then(res=>{
    eduTableDate.value=res.data
    console.log(eduTableDate)
  })
}
//删除按钮
const deleteEduHandler =(id)=>{
  delEduinformation(id).then(res=>{
    showEduInformation()
  })
}
const eduFormRules = reactive({
  userCollege: [
    { required: true, message: "请输入毕业院校", trigger: "blur" },
    { min: 2, max: 20, message: "长度在2-20", trigger: "blur" }
  ],
  userEdu:[
    { required: true, message: "请输入学历", trigger: "blur" },
  ],
  userGraduationDate:[
    { required: true, message: "请输入毕业时间", trigger: "blur" },
  ]
})

//模态框提交按钮
const addEdu=(form)=>{
  eduFormRef.value.validate((valid)=>{
    if(valid){
      addEduinformation(form).then(res=>{
        EduDialog.value=false
        showEduInformation()
        eduForm.userEdu=''
        eduForm.userGraduationDate=''
        eduForm.userMajor=''
        eduForm.userCollege=''
      })
    }else {
      ElMessage.error('提交错误错误')
    }
  })
}

////////////////////亲属基本信息///////////////////
//查看用户亲人信息回显
const familyDialog = ref(false)
const familyBasicInformationFormRef=ref()
const familyBasicInformationForm=reactive({
  familyName: '',
  familyRelation: '',
  famliyCertificatenumber: '',
  famliyCertificatename: '',
  familyLivetogether: '',
  familyMarriage: '',
  familyMarriagechang: '',
  familyOrganization: '',
  familyJob: '',
  famliyJobNature: '',
  famliyIfHighjob: '',
  famliyIfAbroad: '',
  famliyIfJobPartner: '',
  famliyIfLocal: '',
  famliyJurisdiction: '',
  famliyBusinessscope: '',
  famliyIfAvoid: '',
  famliyAvoid: ''
})
//模态框校验规则
const familyBasicInformationFormRules = reactive({
  userId: [
    { required: true, message: "用户编号不能为空", trigger: "blur" }
  ],
  familyName: [
    { required: true, message: "亲属姓名不能为空", trigger: "blur" }
  ],
  familyRelation: [
    { required: true, message: "与本人关系不能为空", trigger: "blur" }
  ],
  famliyCertificatenumber: [
    { required: true, message: "证件号不能为空", trigger: "blur" }
  ],
  famliyCertificatename: [
    { required: true, message: "证件名称不能为空", trigger: "blur" }
  ],
})

//添加提交按钮
const submitFamilyBasicInformationForm=(form)=>{
  familyBasicInformationFormRef.value.validate((valid)=>{
    if(valid){
      addFamilyBasicInformation(form).then(res=>{
        familyDialog.value=false
        proxy.resetForm("familyBasicInformationFormRef");
        getFamilyBasicInformationList()
      })
    }else {
      ElMessage.error('提交错误')
    }
  })
}
//表格数据
const familyBasicInformationList = ref([]);
//查询用户家属基础信息列表
function getFamilyBasicInformationList() {
  listFamilyBasicInformation().then(response => {
    familyBasicInformationList.value = response.rows;
  });
}
function familyBasicInformationHandleDelete(row){
  delFamilyBasicInformation(row.id).then(res =>{
    getFamilyBasicInformationList()
  })
}
/////////////////////犯罪信息//////////////////
const criminalDialog = ref(false)
const criminalFormRef=ref()
const criminalList = ref([]);
const criminalForm=reactive({
  famliyName: '',
  familyRelation: '',
  famliyNumber: '',
  familyCriminalDate: '',
  familyCriminalReason: '',
  familyCriminalStage: '',
  familyCriminalResult: '',
  famliyRemark: ''
})
const criminalFormRules=reactive({
  famliyName: [
    { required: true, message: "亲属姓名不能为空", trigger: "blur" }
  ],
  familyRelation: [
    { required: true, message: "与本人关系不能为空", trigger: "blur" }
  ],
  famliyNumber: [
    { required: true, message: "身份证号不能为空", trigger: "blur" }
  ],
  familyCriminalDate: [
    { required: true, message: "被追究日期不能为空", trigger: "blur" }
  ],
})

const submitCriminalForm=(form)=>{
  criminalFormRef.value.validate((valid)=>{
    if(valid){
      addCriminal(form).then(res=>{
        criminalDialog.value=false
        proxy.resetForm("criminalFormRef");
        getCriminalList()
      })
    }else {
      ElMessage.error("提交错误")
    }
  })
}
/** 查询用户亲属犯罪信息列表 */
function getCriminalList() {
  listCriminal().then(response => {
    criminalList.value = response.rows;
  });
}
function criminaHandleDelete(row){
  delCriminal(row.id).then(res=>{
    getCriminalList()
  })
}
///////////////出国信息////////
const abroadDialog = ref(false)
const abroadRef=ref()
const abroadList = ref([]);
const abroadForm=reactive({
  famliyName: '',
  familyRelation: '',
  famliyNumber: '',
  famliyRegion: '',
  famliyCity: '',
  famliyJob: '',
  famliyDuty: '',
  famliyBegindate: '',
  famliyEnddate: '',
  famliyRemark: ''
})
const abroadRules=reactive({
  famliyName: [
    { required: true, message: "亲属姓名不能为空", trigger: "blur" }
  ],
  familyRelation: [
    { required: true, message: "与本人关系不能为空", trigger: "blur" }
  ],
  famliyNumber: [
    { required: true, message: "身份证号不能为空", trigger: "blur" }
  ],
  famliyRegion: [
    { required: true, message: "所在国家不能为空", trigger: "blur" }
  ],
  famliyCity: [
    { required: true, message: "工作生活城市不能为空", trigger: "blur" }
  ],
  famliyJob: [
    { required: true, message: "工作不能为空", trigger: "blur" }
  ],
  famliyBegindate: [
    { required: true, message: "起始日期不能为空", trigger: "blur" }
  ],
  famliyEnddate: [
    { required: true, message: "返回日期不能为空", trigger: "blur" }
  ],
})

const submitAbroadForm=(form)=>{
  abroadRef.value.validate((valid)=>{
    if(valid){
      addAbroad(form).then(res=>{
        abroadDialog.value=false
        proxy.resetForm("abroadRef");
        getAbroadList()
      })
    }else {
      ElMessage.error("提交错误")
    }
  })
}
const getAbroadList=()=>{
  listAbroad().then(response => {
    abroadList.value = response.rows;
  });
}
const handleAbroadDelete=(row)=>{
  delAbroad(row.id).then(res=>{
    getAbroadList()
  })
}

///////////////移居信息////////
const migrateDialog = ref(false)
const migrateRef=ref()
const migrateList = ref([]);
const migrateForm=reactive({
  userId: '',
  famliyName: '',
  familyRelation: '',
  famliyNumber: '',
  famliyMigrateArea: '',
  famliyLiveCity: '',
  famliyMigrateNumber: '',
  famliyMigrateType: '',
  famliyMigrateDate: '',
  famliyRemark: ''
})
const migrateRules=reactive({
  userId: [
    { required: true, message: "用户编号不能为空", trigger: "blur" }
  ],
  famliyName: [
    { required: true, message: "亲属姓名不能为空", trigger: "blur" }
  ],
  familyRelation: [
    { required: true, message: "与本人关系不能为空", trigger: "blur" }
  ],
  famliyNumber: [
    { required: true, message: "身份证号不能为空", trigger: "blur" }
  ],
  famliyMigrateArea: [
    { required: true, message: "移居国家不能为空", trigger: "blur" }
  ],
  famliyLiveCity: [
    { required: true, message: "现住城市不能为空", trigger: "blur" }
  ],
  famliyMigrateNumber: [
    { required: true, message: "移居证件号码不能为空", trigger: "blur" }
  ],
  famliyMigrateType: [
    { required: true, message: "移居类别不能为空", trigger: "change" }
  ],
  famliyMigrateDate: [
    { required: true, message: "移居日期不能为空", trigger: "blur" }
  ],
})
const submitMigrateForm=(form)=>{
  migrateRef.value.validate((valid)=>{
    if(valid){
      addMigrate(form).then(res=>{
        migrateDialog.value=false
        proxy.resetForm("migrateRef");
         getMigrateList()
      })
    }else {
      ElMessage.error("提交错误")
    }
  })
}
const getMigrateList=()=>{
  listMigrate().then(response => {
    migrateList.value = response.rows;
  });
}
const handleMigrateDelete=(row)=>{
  delMigrate(row.id).then(res=>{
    getMigrateList()
  })
}
</script>
<style scoped lang="scss">
</style>